<template>
  <div class="go-setting-item" :style="{ width: width + 'px' }">
    <slot></slot>
    <div class="go-setting-item-tip">
      <n-text class="name" depth="3" v-if="name">{{ name }}</n-text>
      <el-icon @click="SelectDatasourceBtn" :color="_paramsKey?'#34c749':''">
        <Operation/>
      </el-icon>
      <!--      <n-tooltip trigger="hover" @update:show="handleUpdateShow">-->
      <!--        &lt;!&ndash;        点击显示配置数据源窗口 &ndash;&gt;-->
      <!--        <template #trigger>-->
      <!--          <el-icon @click="SelectDatasourceBtn" :color="_paramsKey?'#34c749':''">-->
      <!--            <Operation/>-->
      <!--          </el-icon>-->
      <!--        </template>-->
      <!--        {{ _paramsKey }}-->
      <!--      </n-tooltip>-->
    </div>
    <data-source
        :show="showDatasource" :data="optionData"
        :param-name="paramName" @close="closeDatasource"
        :data-source-type="dataSourceType"></data-source>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, getCurrentInstance, reactive} from 'vue'
// @ts-ignore
import Utils from "@/vue2-flow/src/utils/Common.js";
// @ts-ignore
import {Emitter} from "@/utils/Emitter.js";
import {MessageWarning} from "@/utils";
import lodash from "lodash";

const props = defineProps({
  name: {
    type: String,
    required: false
  },
  width: {
    type: Number,
    required: false
  },
  optionData: {
    type: Object,
    required: false
  },
  chartConfig: {
    type: Object,
    required: false
  },
  paramName: {
    type: String,
    required: false,
    default: ''
  },
  /**
   * 数据源类型 :
   * 可选： NODE = 节点, NODE_PARAM = 节点参数
   * 默认：NODE_PARAM
   */
  dataSourceType: {
    type: String,
    required: false,
    default: 'NODE_PARAM'
  }
})
const showDatasource = ref(false)
const emit = defineEmits(['ds-click'])

const SelectDatasourceBtn = () => {
  if (props.optionData) {
    showDatasource.value = true
  } else {
    MessageWarning('暂不支持动态设置')
  }
}

type NodeOutParamType = {
  nodeId: number,
  ParamName: string,
  ValueType: string,
  Value: string,
  TargetParamName: string,
  option: string

}
const _paramsKey = ref('')
const handleUpdateShow = (show: boolean) => {
  try {
    if (show || 1 == 1) {
      const {optionData, paramName} = props
      const datasource = optionData?.datasource ?? {nodeIds: [], params: {}}
      for (let paramsKey in datasource.params) {
        if (datasource.params[paramsKey] === paramName) {
          _paramsKey.value = paramsKey
          break;
        }
      }
    }
  } catch (ex) {
    console.log(ex)
  }
}
const closeDatasource = (NodeOutParam: NodeOutParamType) => {
  showDatasource.value = false
  if (NodeOutParam) {
    const NodeParamKey = NodeOutParam.nodeId + '_' + NodeOutParam.ParamName
    const {optionData, paramName} = props
    // @ts-ignore
    let datasource = optionData.datasource
    //let datasource = lodash.get(optionData, paramName);
    if (NodeOutParam.option === 'delete') {
      delete datasource.params[NodeParamKey]
    } else {
      if (Utils.IsEmpty(datasource) || typeof datasource === 'string') {
        datasource = {nodeIds: [], params: {}}
      }
      for (let paramsKey in datasource.params) {
        if (datasource.params[paramsKey] === paramName) {
          delete datasource.params[paramsKey]
        }
      }
      datasource.params[NodeParamKey] = paramName
    }

    const keys = Object.keys(datasource.params);
    datasource.nodeIds = []
    for (let key of keys) {
      const nid = key.split('_');
      if (!datasource.nodeIds.includes(+nid[0])) {
        datasource.nodeIds.push(+nid[0]);
      }
    }
    // @ts-ignore
    optionData.datasource = datasource
  }
}
onMounted(() => {
})
</script>

<style lang="scss" scoped>
@include go(setting-item) {
  display: flex;
  flex-direction: column;
  min-width: 110px;
  text-align: start;
  margin-bottom: 5px;
  .name {
    margin-top: 2px;
    margin-right: 6px;
  }

  .go-setting-item-tip {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

</style>
